<template>
	<div class="notice">
		<div class="status-bar" :style="{height: statusHeight}"></div>
		<div class="filter">
			<uni-data-select v-model="type" placeholder="招标类型" :localdata="types" @change="typeChange"></uni-data-select>
			<uni-data-select v-model="date" placeholder="发布时间" :localdata="dates" @change="dateChange"></uni-data-select>
		</div>
		<div class="container">
			<div class="list">
				<div class="item" v-for="item in list" :key="item.id">
					<div class="title">
						<div class="flag">询价</div>
						<div class="title-text">端午节文创产品礼盒采购询价公告</div>
					</div>
					<div class="content">
						<div class="time">发布时间：2025-05-06 10:30</div>
						<div class="status">已完成</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				types: [{
						value: 0,
						text: "货物"
					},
					{
						value: 1,
						text: "服务"
					},
					{
						value: 2,
						text: "工程"
					},
				],
				date: null,
				dates: [{
						value: 0,
						text: "本周"
					},
					{
						value: 1,
						text: "本月"
					},
					{
						value: 2,
						text: "近三月"
					},
				],
				list: [{
					id: 1
				}, {
					id: 2
				}, {
					id: 3
				}],
			}
		},
		computed: {
			statusHeight() {
				return `${uni.getSystemInfoSync().statusBarHeight}px`;
			}
		},
		created() {
			this.getList();
		},
		methods: {
			typeChange() {
				this.getList();
			},
			dateChange() {
				this.getList();
			},
			getList() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.notice {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: $uni-bg-color;

		.status-bar {
			width: 100%;
			background-color: white;
			flex-shrink: 0;
		}

		.filter {
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-shrink: 0;

			uni-data-select {
				width: 200rpx;
				background-color: white;

				&:not(:first-child) {
					margin-left: 10rpx;
				}
			}
		}

		.container {
			width: 100%;
			flex: 1;
			overflow-y: auto;

			.list {
				width: 100%;
				background-color: white;
				display: flex;
				flex-direction: column;
				padding: 0 28rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					padding: 16rpx 0;
					box-sizing: border-box;

					&:not(:last-child) {
						border-bottom: 1px solid $uni-border-2;
					}

					display: flex;
					flex-direction: column;

					.title {
						width: 100%;
						display: flex;
						align-items: center;

						.flag {
							color: white;
							background-color: $uni-error;
							padding: 4rpx 14rpx;
							border-radius: $uni-radius-root;
							margin-right: 10rpx;
							font-size: 26rpx;
							flex-shrink: 0;
						}

						.title-text {
							flex: 1;
							font-size: 26rpx;
							font-weight: bold;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.content {
						width: 100%;
						margin-top: 16rpx;
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: $uni-info;
					}
				}
			}
		}
	}
</style>